<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript">
        // 计算属性
        var App = {
            template: `<div>
                <input type='text' v-model = 'n1' />
                 +
                <input type='text' v-model = 'n2' />
                 *
                <input type='text' v-model = 'rate' />
                = {{result}}

            </div>`,
            data: function(){
                return {
                    n1:0,
                    n2:0,
                    rate:0
                }
            },
            // 计算属性
            computed: {
                result: function(){
                    // 监视对象，写在了函数内部
                    // 凡是函数内部有this。相关属性，改变都会触发当前函数
                    return ((this.n1 - 0) + (this.n2 - 0)) * this.rate
                }
            }

        };

        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template:'<app/>'
        });

    </script>
</body>
</html>